<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>top</title>
        <style media="screen">
            .dropbox-down {
                width: 900px;
                border: 1px solid #333;
            }
            .dropdown-nav li:hover ul {
                top: 100%;
                color: #666;
            }
            ul{
                display: inline-block;
                list-style: none;
            }
            li{
                display: inline-block;
            }
            li::after {
                  content: '';
                  border-left:1px solid #676A6c;
              }
        </style>
    </head>
    <body>
        <div class="dropbox-down">
            <ul class="dropdown-nav">
                <li>
                    <a href="#">1hover我top:100%</a>
                </li>
                <li>
                    <a href="#">2hover我top:100%</a>
                </li>
                <li>
                    <a href="#">3hover我top:100%</a>
                </li>
                <li>
                    <a href="#">4hover我top:100%</a>
                </li>
            </ul>
        </div>
        <div class="dropbox-down">
            <div style="top:100%">
                top:100%
            </div>
        </div>
    </body>
</html>
